I have been trying to get a list to display for quite a while now. I have tried all sorts of tips from various people without success. Now I am running into a new problem. I have taken the exact code from an example and I can't seem to get it to work either. First of all, here is the code.

Station.js

Ext.define('Syl.model.Station', {
extend: 'Ext.data.Model',

config: {
    fields: [
        { name: 'id', type: 'string' },
        { name: 'stop', type: 'string' }
    ]
}
});

Stations.js

Ext.define('Syl.store.Stations', {
extend  : 'Ext.data.Store',
requires: ['Syl.model.Station'],
id: 'stations',
xtype: 'stations',
config  : {
    model : 'Syl.model.Station',
    //storeId: 'stationsStore',
    autoLoad : true,
    //sorters: 'stop',
    /*  proxy: {
        type: 'ajax',
        url: 'stations.json'

    }*/
    data: [
        { "id": "129", "stop": "NY Station" },
        { "id": "13", "stop": "Newark Station" }
    ]
}
});

MyService.js

Ext.define('Syl.view.MyService', {
extend: 'Ext.Panel',
xtype: 'stationsformPage',
requires: [
'Syl.store.Stations',    
'Ext.form.FieldSet',
'Ext.field.Password',
'Ext.SegmentedButton',
'Ext.List'
],

config: {
    fullscreen: true,
    layout: 'vbox',
    //iconCls: 'settings',
    //title: 'My Service',
    items: [
    {
        docked: 'top',
        xtype: 'toolbar',
        title: 'My Service'
    },

    {
                    [OLDER CODE BEGIN]
        xtype: 'list',
        title: 'Stations',
        //store: 'Stations',
                    store: stationStore, //UPDATED
        styleHtmlContent: true,
        itemTpl: '<div><strong>{stop}</strong> {id}</div>'
                    [OLDER CODE END]

                    [UPDATE X2 CODE BEGIN]
                    xtype: 'container',
        layout: 'fit',
        flex: 10,
        items: [{
            xtype: 'list',
            title: 'Stations',
            width: '100%',
            height: '100%',
            store: stationStore,
            styleHtmlContent: true,
            itemTpl: '<div><strong>{stop}</strong> {id}</div>'
        }]
                    [UPDATE X2 CODE END]
    },

    ]
}
});

app.js (edited down to the basics)

var stationStore; //UPDATED

Ext.application({
    name: 'Syl',
    views: ['MyService'],
    store: ['Stations'],
    model: ['Station'],

    launch: function() {
            stationStore = Ext.create('Syl.store.Stations');//UPDATED
    var mainPanel = Ext.Viewport.add(Ext.create('Syl.view.MyService'));
    },
});

Okay, now when I run this in the browser, I get this error: "[WARN][Ext.dataview.List#applyStore] The specified Store cannot be found". The app runs but there is no list. I can't understand how this code could work for the people who gave the example and not me. Could it be a difference in the Sencha Touch version? I am using 2.0.1.1.

To add to this, I have been having problems in general with lists not displaying. I had originally tried a stripped down list without even having a store. I tried to just set the data property in the list's config. I didn't get this error, but I also didn't get a list to display. That is why I thought I would try someone else's code. I figured if I could at least get a working list up and running, I could manipulate it into doing what I want.

Any help would be greatly appreciated. Thanks.

[UPDATED] Okay, so I did some more hunting and someone told me I needed to have an instance of my store to load into the list, not the store definition. So I updated the code as you can see and the error went away. The problem is that I still don't get a list. I have no errors at all, but I can't see a list. Am I not loading the data correctly? Or am I not putting the list in the view correctly?

[UPDATED X2] Okay, so I learned that the list should be in a container and that I should give it a width and a height. I'm not totally sure on this being correct, but I do now have a list that I can drag up and down. The problem is there is still nothing in it. Anyone have a clue why?